<template>
  <div>
    <van-nav-bar
      title="城市列表"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-index-bar >
      <van-index-anchor index="当前城市" />
      <van-cell :title="city.name" />
      <van-index-anchor index="热门城市" />
     <div v-for="item  in indexList"
         :key="item">
      <van-index-anchor :index="item" />
      <div
        v-for="(arr,index) in cityList"
        :key="index"
        >
        <van-cell
        :title="arr.label"
         v-if=" arr.short[0].toUpperCase() === item"
        @click="ChoiceFn(arr.label,arr.value)"
       />
      </div>
     </div>

    </van-index-bar>
  </div>
</template>

<script>
import { getCityListApi } from '@/api'
export default {
  data () {
    return {
      cityList: [],
      indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
      ],
      city: {
        name: localStorage.getItem('cityName') || '上海',
        value: localStorage.getItem('cityValue') || 'AREA|dbf46d32-7e76-1196'
      }
    }
  },
  async created () {
    const res = await getCityListApi(1)
    console.log(res.data.body)
    this.cityList = res.data.body
  },

  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    ChoiceFn (name, value) {
      const obj = {
        name,
        value
      }
      this.$store.commit('getCityInfo', obj)
      // this.$router.replace({
      //   name: 'home'
      // })
      this.$router.go(-1)
      console.log(obj)
    }
  }

}
</script>

<style lang="less" scoped>
@divider-text-color:red;
</style>
